cvd系统项目的前端需要放在智能跟单项目里面，需要引用工单工具咨询模块，客户满意度评价等模块相关代码

如果重写该部分逻辑代码预估开发加测试需要大概20人左右，大大增加了工作量，到时候需要维护两个系统代码，增加了维护成本，
一开始思考是决定使用iframe嵌套的方式来实现，iframe嵌套就只需要维护一套代码，但存在很多问题
比如：
1.url不同步。浏览器刷新iframeurl状态丢失、后退前进按钮无法使用。
（HTML5的History API解决-在父页面中使用History API的`pushState`方法或`replaceState`，保存在浏览器的会话历史栈）
后退前进按钮解决-可以在父页面中监听`popstate`事件
2.DOM结构不共享。想象一下屏幕右下角1/4的iframe里来-一个带遮罩层的弹框,同时我们要求这
个弹框要浏览器居中显示,还要浏览器resize时自动居中..

<!-- 解决 -->：在父页面中创建一个遮罩层和弹框的HTML结构， 
在父页面中使用CSS和JavaScript来控制遮罩层和弹框的显示和隐藏，
在父页面中监听浏览器的resize事件，当浏览器窗口大小改变时，重新计算弹框的位置，并将其居中显示。
<!-- 请注意 -->，由于iframe和父页面的DOM结构是相互独立的，所以在iframe中无法直接操作父页面的元素。需要通过`window.parent`来访问父页面的全局对象和方法

3.全局上下文完全隔离,内存变量不共享。iframe内外系统的通信、数据同步等需求,主应用的
cookie要透传到根域名都不同的子应用中实现免登效果。（postMessage进行通信）
4.慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。（解决：预加载和缓存（主应用可以把子应用的资源缓存到本地））

相比之下微前端解决了这些问题 最后决定采用乾坤微前端来实现这一功能。
乾坤微前端是一种前端架构模式，旨在解决多个独立开发的前端应用集成到一个统一的整体中的问题。相比于使用iframe的传统微前端方案，乾坤微前端具有以下优势：

1. URL同步：乾坤微前端通过使用history模式的前端路由，可以实现URL的同步，使得浏览器刷新时不会丢失状态，并且可以正常使用后退和前进按钮。

2. 共享DOM结构：乾坤微前端采用了虚拟DOM技术，可以实现不同子应用之间的DOM结构共享，从而可以更方便地实现弹框、居中显示等需求。

3. 共享全局上下文：乾坤微前端提供了一套全局状态管理机制，可以实现不同子应用之间的通信和数据同步，包括共享cookie等功能。

4. 性能优化：乾坤微前端采用了资源预加载和缓存机制，可以减少子应用的加载时间，提高整体性能。同时，乾坤微前端还支持增量更新，只加载发生变化的部分，减少了不必要的资源加载。

5. 插件化扩展：乾坤微前端提供了丰富的插件机制，可以方便地扩展功能，例如权限控制、日志监控等。

总的来说，乾坤微前端相比于使用iframe的传统微前端方案，具有更好的URL同步、DOM结构共享、全局上下文共享、性能优化和插件化扩展等优势，能够更好地满足复杂前端应用集成的需求。

https://mp.weixin.qq.com/s/koTarunLUBu-mjesfKyRCw
在开发过程中遇到了一些问题，比如微前端样式污染问题，
由于主应用和子应用使用技术栈相同，项目中很多class类名相同，导致样式错乱，完全使用乾坤自带的沙箱隔离不完全。
思考解决方案：
1.一开始思考通过一些插件来修改组件前缀和样式前缀，比如把ant修改为gnt,
虽然这样也能隔离样式，但是插件转换了class的命名，但是实际上转换过后的子应用改动比较大。样式也会有些错乱。这个需要根据自己实际项目来判别。

2使用qiankun自带沙箱隔离，在主应用中start函数中，通过配置sandbox做到样式隔离。但这样直接使用沙箱隔离会遇到很多坑。
start({
  sandbox: {
    // 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点，从而确保微应用的样式不会对全局造成影响。
    strictStyleIsolation: true,
    // 设置实验性的样式隔离特性，即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围
    experimentalStyleIsolation: true
  }
})
介绍：strictStyleIsolation严格样式隔离模式，
为子应用的根节点创建一个shadow root。最终整个应用的所有DOM将形成一棵shadow tree。
我们知道，shadowDom的特点是，它内部所有节点的样式对树外面的节点无效，因此自然就实现了样式隔离

坑：当启用strictStyleIsolation时，因为某些UI框架（例如element、ant-design等）
可能会生成一些弹出框直接挂载到主应用的document.body下，此时由于脱离了shadow tree。会导致页面报错。

experimentalStyleIsolation样式隔离介绍：
experimentalStyleIsolation设置实验性的样式隔离特性，
即在子应用下面的样式都会包一个 特殊的选择器规则 来限定其影响范围。
这种方案的策略是为子应用的根节点添加一个特定的随机属性，这样页面也不会报错，但子应用弹出框的样式不生效，


3.最后决定采用qiankun自带的experimentalStyleIsolation实验性的样式隔离的同时，
在子应用的main.js中重写document.body.appendChild的方法